<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
  <meta http-equiv="expires" content="0">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>抽奖</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/fontSize.js"></script>
  <script type="text/javascript" src="js/zepto.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript" src="js/layer/layer.js"></script>
  <script type="text/javascript" src="js/jweixin-1.2.0.js"></script>
  <script type="text/javascript" src="js/swiper.min.js"></script>
  <script type="text/javascript" src="js/config.js?v=3"></script>
  <style type="text/css">
  	body{background: #ff7b9d url(img/p_75.png) no-repeat;background-size: 100% auto;}
  	.countDown{color: #fff;font-size: .26rem;height: .55rem;line-height: .55rem;border-radius: .1rem;text-align: center;width: 2.83rem;background: rgba(0, 0, 0, 0.2);position: absolute;right: .18rem;top: .23rem;}
  .chance{width:3.56rem;height: .5rem;line-height: .5rem;border-radius: .3rem; background: #fb5b7d;margin:0 auto;font-size: .28rem;color: #fff;text-align: center;box-shadow:  0 0 .2rem #fff;}
  .turntable{box-sizing: border-box;padding: .3rem .3rem;width:7.2rem;height: 6.75rem;margin:.5rem auto 0; background: url(img/p_76.png) no-repeat;background-size: 100% 100%;position: relative;}
   .start{width: 2rem;float: left;}
   .detail_title{margin-top: .4rem;height: .5rem;line-height: .5rem;text-align: center; }
   .detail_title span{height: .5rem;line-height: .5rem;font-size: .34rem;color: #ffd087;font-weight: bold;padding: 0 .55rem;}
   .detail_title img{width: 1.45rem;vertical-align: middle;}
   .prize_list{width: 5.7rem;margin:.3rem auto .45rem;}
   .prize_list tr td{color:#fff;font-size:.26rem;padding: .05rem 0; text-align: left; }
   .prize_list tr td:first-child{width: 2.8rem;}
   .prize_list tr td:nth-child(2){width: 2.1rem;}
   .prize_list tr td:last-child{width: .7rem;}
   .rule_ul{width: 5.7rem;margin:.3rem auto;}
   .rule_ul li{font-size: .26rem;color: #ffffff;line-height: .38rem;margin-bottom: .25rem;}
   .turntable li.turntd{float: left;width: 2.07rem;height: 1.87rem;background: url(img/p_80.png) no-repeat;background-size: 100% 100%;margin-left: .1rem;margin-top: .1rem;position: relative;}
   .turntable li.start{float: left;width: 2.07rem;height: 1.87rem;background: url(img/p_81.png) no-repeat;background-size: 100% 100%;
   	margin-left: .1rem;margin-top: .1rem;overflow: hidden;}
	.turntable li.start span{color: #ffffff;font-size: .52rem;font-weight: bold;width: 1.35rem;margin:.1rem auto 0;display: block;text-align: center;}
   .turntable li.active:after{width: 2.35rem;height: 2.15rem;background: url(img/p_82.png) no-repeat;background-size: 100% 100%;position: absolute;top: -0.1rem;left: -0.1rem;content: '';display: block;}
  </style>
</head>
<body>
	<div id="app">
		<div class="countDown">距截止还有23:25:16</div>
		<div style="height:6.97rem;"></div>
		<div class="chance">您还有1次抽奖机会</div>
		<ul class="turntable" id="lottery"> 
	        <li class="turntd lottery-unit lottery-unit-0 active"></li>
	        <li class="turntd lottery-unit lottery-unit-1"></li>
	        <li class="turntd lottery-unit lottery-unit-2"></li>
	        <li class="turntd lottery-unit lottery-unit-3"></li>
	        <li class="start"><span>开&nbsp;始抽&nbsp;奖</span></li>
	        <li class="turntd lottery-unit lottery-unit-4"></li>
	        <li class="turntd lottery-unit lottery-unit-5"></li>
	        <li class="turntd lottery-unit lottery-unit-6"></li>
	        <li class="turntd lottery-unit lottery-unit-7"></li>
			
		</ul>
		<div class="detail_title"><img src="img/p_78.png" alt=""><span>奖品清单</span><img src="img/p_79.png" alt=""></div>
		<table class="prize_list">
			<tr>
				<td>特等奖：iPhoneX </td>
				<td>(￥9688)</td>
				<td>*1名</td>
			</tr>
			<tr>
				<td>特等奖：iPhoneX </td>
				<td>(￥9688)</td>
				<td>*1名</td>
			</tr>
			<tr>
				<td>特等奖：iPhoneX </td>
				<td>(￥9688)</td>
				<td>*1名</td>
			</tr>
		</table>
		<div class="detail_title"><img src="img/p_78.png" alt=""><span>活动规则</span><img src="img/p_79.png" alt=""></div>
	    <ul class="rule_ul">
	    	<li>这是活动规则这是活动规则这是活动规则这是活动规则</li>
	    	<li>这是活动规则这是活动规则这是活动规则这是活动规则</li>
	    	<li>这是活动规则这是活动规则这是活动规则这是活动规则</li>
	    	<li>这是活动规则这是活动规则这是活动规则这是活动规则</li>
	    	<li>这是活动规则这是活动规则这是活动规则这是活动规则</li>
	    	<li>这是活动规则这是活动规则这是活动规则这是活动规则</li>
	    </ul>
	</div>
    <script type="text/javascript">
    	var lottery = {
			index: -1,    //当前转动到哪个位置，起点位置
			count: 0,     //总共有多少个位置
			timer: 0,     //setTimeout的ID，用clearTimeout清除
			speed: 100,    //初始转动速度
			times: 0,     //转动次数
			cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
			prize: -1,    //中奖位置
			init: function(id) {
				if ($('#' + id).find('.lottery-unit').length > 0) {
					$lottery = $('#' + id);
					$units = $lottery.find('.lottery-unit');
					this.obj = $lottery;
					this.count = $units.length;
					$lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
				};
			},
			roll: function() {
				var index = this.index;
				var count = this.count;
				var lottery = this.obj;
				$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
				index += 1;
				if (index > count - 1) {
					index = 0;
				};
				$(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
				this.index = index;
				return false;
			},
			stop: function(index) {
				this.prize = index;
				return false;
			}
		};

		function roll() {
			lottery.times += 1;
			lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
			
			if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
				clearTimeout(lottery.timer);
				lottery.prize = -1;
				lottery.times = 0;
				click = false;
			} else {
				if (lottery.times < lottery.cycle) {
					lottery.speed -= 10;
				} else if (lottery.times == lottery.cycle) {
					var index = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
					lottery.prize = 2;		
				} else {
					if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
						lottery.speed += 110;
					} else {
						lottery.speed += 20;
					}
				}
				if (lottery.speed < 40) {
					lottery.speed = 40;
				};
				lottery.timer = setTimeout(roll, lottery.speed); //循环调用
			}
			return false;
		}

		var click = false;

		window.onload = function(){
			lottery.init('lottery');
			$('.start').click(function() {
				if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
					return false;
				} else {
					lottery.speed = 100;
					roll(); //转圈过程不响应click事件，会将click置为false
					click = true; //一次抽奖完成后，设置click为true，可继续抽奖
					return false;
				}
			});
		};
		var app = new Vue({
            el: '#app',
            data: {
                // id:GetQueryString("id"),     
                id:43,     
                unionid:GetQueryString("unionid"),
                resObj:{}
         
            },
            mounted(){
               hideMenu();
               this.getlottery(); 
            },
            methods:{
            	getlottery:function(){
            	  var that=this;
                  ajaxFun("POST","/guess/lottery",{
                     q_id:this.id,
                     unionid:this.unionid
                  },function(data){
                      var res=data;
                      if(res.code==1){
                         that.resObj=res;
                      }else{

                      }
                              
                  }); 
            	}
            }

        });
    </script>
</body>
</html>